@extends('admin.layouts.app')
@section('isee_title')
    {{$title}}
@endsection
@section('isee_content')
    <!--                主内容展示-->
    <div>
        <el-card class="box-card">
            <p style="padding: 8px 16px;font-size: 14px;border-radius:4px;border-left: 5px solid #50bfff ">
                全国省市县列表
            </p>
            <el-divider></el-divider>

            <div style="display: flex;">
                <div style="width: 75%">
                    <el-button-group>
                        <el-button round size="mini" @click="del" type="danger" icon="el-icon-delete">删除
                        </el-button>
                        <el-button round size="mini" type="primary"
                                   icon="el-icon-circle-plus-outline">添加
                        </el-button>
                    </el-button-group>
                </div>
                <div style="display: flex">
                    <el-select size="mini" clearable v-model="searchData.level" placeholder="请选择省、市、县">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    &nbsp;
                    <el-input size="mini" placeholder="请输入名称" v-model="searchData.searchVal"
                              class="input-with-select">
                        <el-button type="primary" slot="append"
                                   icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <template>
                <el-table
                    v-loading="loading"
                    element-loading-text="正在请求，请稍候。。。"
                    ref="multipleTable"
                    :data="listData.data"
                    tooltip-effect="dark"
                    style="width: 100%;text-align: center"
                    size="mini"
                    height="500"
                    highlight-current-row
                    @selection-change="rowSelect"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        label="ID"
                        width="50">
                        <template slot-scope="scope">@{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column
                        label="名称"
                        width="300">
                        <template slot-scope="scope">
                            <el-input style="width: 200px"
                                      size="mini"
                                      max="1000"
                                      min="0"
                                      placeholder="请输入内容"
                                      @change="update(scope.row.id,scope.row.name,1)"
                                      v-model="scope.row.name">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="拼音"
                        width="300">
                        <template slot-scope="scope">
                            <el-input style="width: 200px"
                                      size="mini"
                                      max="1000"
                                      min="0"
                                      placeholder="请输入内容"
                                      @change="update(scope.row.id,scope.row.letter,2)"
                                      v-model="scope.row.letter">
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="邮编"
                        width="200">
                        <template slot-scope="scope">
                            <el-input style="width: 150px"
                                      size="mini"
                                      placeholder="请输入内容"
                                      @change="update(scope.row.id,scope.row.zip_code,3)"
                                      v-model="scope.row.zip_code">
                            </el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div style="margin: 20px;">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listData.currentPage"
                    :page-sizes="listData.pageSizes"
                    :page-size="listData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listData.total">
                </el-pagination>
            </div>
        </el-card>

        {{--            <el-dialog title="文章信息" :visible.sync="formData.visible" width="800px">--}}
        {{--                <el-form size="small" :model="formData" :rules="rules" ref="formData" label-width="100px">--}}
        {{--                    <el-tabs v-model="activeName" @tab-click="handleClick">--}}
        {{--                        <el-tab-pane label="基础" name="1">--}}
        {{--                            <el-form-item label="标题" prop="name">--}}
        {{--                                <el-input v-model="formData.name" class="form-item-width">--}}
        {{--                                </el-input>--}}
        {{--                            </el-form-item>--}}
        {{--                            <el-form-item label="作者" prop="author">--}}
        {{--                                <el-input v-model="formData.author" class="form-item-width">--}}
        {{--                                </el-input>--}}
        {{--                            </el-form-item>--}}
        {{--                            <el-form-item label="分类" prop="categoryId">--}}
        {{--                                <el-cascader v-model="formData.categoryId" class="form-item-width"--}}
        {{--                                             placeholder="请选择分类"--}}
        {{--                                             :options="categoryList" ref="categoryCascader"--}}
        {{--                                             clearable></el-cascader>--}}
        {{--                            </el-form-item>--}}
        {{--                            <el-form-item label="权重" prop="sortWeight">--}}
        {{--                                <el-input v-model.number="formData.sortWeight"--}}
        {{--                                          class="form-item-width"></el-input>--}}
        {{--                            </el-form-item>--}}

        {{--                            <el-form-item label="启用" prop="status">--}}
        {{--                                <el-switch--}}
        {{--                                    v-model="formData.status"--}}
        {{--                                    :active-value="1"--}}
        {{--                                    :inactive-value="0"--}}
        {{--                                    active-color="#13ce66"--}}
        {{--                                    inactive-color="#ff4949">--}}
        {{--                                </el-switch>--}}
        {{--                            </el-form-item>--}}

        {{--                        </el-tab-pane>--}}
        {{--                        <el-tab-pane label="内容" name="2">--}}
        {{--                            <div ref="editor" style="margin-bottom: 10px;height: 300px">--}}

        {{--                            </div>--}}
        {{--                        </el-tab-pane>--}}
        {{--                    </el-tabs>--}}

        {{--                    <el-form-item>--}}
        {{--                        <el-button type="primary" @click="submitForm('formData')">保存</el-button>--}}
        {{--                        <el-button @click="resetForm('formData')">重置</el-button>--}}
        {{--                    </el-form-item>--}}
        {{--                </el-form>--}}
        {{--            </el-dialog>--}}
    </div>
    <!--                主内容展示 结束-->
@endsection
@section('isee_script')
    <script>
      var vm = new Vue({
        el: '#app',
        components: {
            @include('admin.layouts.components')
        },
        created() {
          this.loading = true
        },
        data: {
            @include('admin.layouts.data')
            searchData: {
              level: '-1',
              searchVal: '',
            },
          loading: false,
          listData: {
            currentPage: 1,
            pageSize: 30,
            pageSizes: [20, 30, 40, 50, 60, 100],
            total: 0,
            data: [],
          },
          rowSelected: [],
          options: [{
            value: '-1',
            label: '全部'
          }, {
            value: '0',
            label: '省'
          }, {
            value: '1',
            label: '市'
          }, {
            value: '2',
            label: '县'
          }],
        },
        methods: {
            @include('admin.layouts.methods')
            rowSelect(rowSelected) {
              console.log('rowSelected')
              console.log(rowSelected)
              this.rowSelected = rowSelected;
            },
          handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.listData.pageSize = val,
              this.getLists();
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.listData.currentPage = val,
              this.getLists();
          },
          update(id, val, index) {
            console.log('update')

            if (val == '') {
              this.$message.error('值不能为空')
              return
            }
            this.loading = true
            axios.post('/update', {
              id,
              val,
              index
            }).then(res => {
              setTimeout(() => {
                this.loading = false
              }, 2000)
            }).catch(err => {
              console.log(err)
            })


          },
          del(){
            console.log('del')
            console.log(this.rowSelected)
          },
          search() {
            console.log('search')
            if(this.searchData.level==''||this.searchData.searchVal==''){
              return
            }
            this.getLists()
          },
          getLists() {
            axios.post('/getLists', {
              page: this.listData.currentPage,
              limit: this.listData.pageSize,
              level:this.searchData.level,
              searchVal:this.searchData.searchVal,
            }).then(res => {
              let data = res.data
              if (data.errCode == 1) {
                let result = data.result
                this.listData.total = result.total
                this.listData.currentPage = result.currentPage
                this.listData.pageSize = result.limit
                this.listData.data = result.data
              }
            }).catch(err => {
              console.log(err)
            })

          }
        },
        beforeMount() {
            @include('admin.layouts.beforeMount')

        },
        mounted() {
          setTimeout(() => {
            this.loading = false
          }, 1000)

          this.getLists()

        }
      })
    </script>
@endsection

